import '../SignAdd/SignAdd.scss'
import { Form, Input, Button, Select, Image, Modal,Row,Col,Space } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import Avatar from '../../Article_add/Avatar';
const { confirm } = Modal;
const { Option } = Select;

const layout = {
  labelCol: {
      span: 6,
  },
  wrapperCol: {
      span: 17,
  },
};
const SignDetail=(props)=>{
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log(values);
  };
  const backCar = () => {
    props.setAdd(false)
  }
  const quxiao = () => {
    confirm({
        icon: <ExclamationCircleOutlined />,
        content: '您确定离开此页面吗？',
        cancelText: '取消',
        okText: '确定',
        onOk() {
            //   console.log('OK');
            backCar()
        },
        onCancel() {
            console.log('Cancel');
        },
    });
  }

  return (
    <div className='signadd'>
      {/* 1、头部 */}
      <div className='header'>
        {/* 左边 */}
        <div className='tit'>
          <div></div>
          <div>合同订立详情</div>
        </div>
        {/* 右边 */}
        <div>
          <span className="iconfont icon-a-16guanbi" onClick={backCar}></span>
        </div>
      </div>
      <hr/>
      {/* 2、内容 */}
      <div className='content'>
      <Row>
        {/* 左——合同基本信息 */}
        <Col span={8}>
         <p>合同基本信息：</p>
         <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
            <Form.Item
                name="number"
                label="合同编号"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Input placeholder='ZSC32523912' value='' disabled/>
            </Form.Item>
            <Form.Item
                name="signtime"
                label="签订时间"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Input placeholder='2022/01/23' value='' disabled />
            </Form.Item>
            <Form.Item
                name="endtime"
                label="结束时间"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Input placeholder='2022/01/23' value='' disabled />
            </Form.Item>
            <Form.Item
                name="name"
                label="租户名称"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Input placeholder='杭州市房产有限公司' value='' disabled />
            </Form.Item>
            <Form.Item
                name="type"
                label="租户类型"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Select placeholder='企业' value='' disabled>
                  <Option value='企业'>企业</Option>
                  <Option value='个体经营户'>个体经营户</Option>
                </Select>
            </Form.Item>
            <Form.Item
                name="attribute"
                label="合同属性"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Select placeholder='续约' value='' disabled>
                  <Option value='新签'>新签</Option>
                  <Option value='续签'>续签</Option>
                </Select>
            </Form.Item>
            <Form.Item
                name="signer"
                label="签订人"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Input placeholder='徐大春' value='' disabled />
            </Form.Item>
            <Form.Item
                name="contact"
                label="联系方式"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Input placeholder='13200898936' value='' disabled />
            </Form.Item>
          </Form>
        </Col>
        {/* 中——租赁房间信息 */}
        <Col span={8}>
         <p>租赁房间信息：</p>
         <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
         <Form.Item
                name="building"
                label="所属楼宇"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Select placeholder='A1幢' value='' disabled>
                  <Option value='A1幢'>A1幢</Option>
                  <Option value='C2幢'>C2幢</Option>
                </Select>
            </Form.Item>
            <Form.Item
                name="roomname"
                label="房间名称"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
               <Input placeholder='308' value='' disabled/>
            </Form.Item>
            <Form.Item
                name="area"
                label="房间面积"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
               <Input placeholder='55.23' value='' disabled/>
            </Form.Item>
            <Form.Item
                name="pricearea"
                label="计价面积"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
               <Input placeholder='55' value='' disabled/>
            </Form.Item>
            <Form.Item
                name="fee"
                label="物业费用"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
               <Input placeholder='206' value='' disabled/>
            </Form.Item>
         </Form>
        </Col>
        
        {/* 右——收款信息 */}
        <Col span={8}>
          <p>收款信息：</p>
          <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
            <Form.Item
                name="account"
                label="开户名称"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
              <Input placeholder='滨康大道时代分户' value='' disabled/>
            </Form.Item>
            <Form.Item
                name="bank"
                label="开户银行"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
              <Input placeholder='杭州银行'  value='' disabled/>
            </Form.Item>
            <Form.Item
                name="number"
                label="开户名称"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
              <Input placeholder='622847129052349412' value='' disabled/>
            </Form.Item>
            <Form.Item
                name="credential"
                label="收款凭证"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
               <Image
                  width={100}
                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               />
            </Form.Item>
          </Form>
        </Col>
      </Row>
       
      </div>
      {/* 3、尾部 */}
      {/* <div className='footer'>
        <Form.Item>
            <Space size='large'>
                <Button type="primary" htmlType="submit">
                    保存
                </Button>
                <Button onClick={quxiao}>
                    取消
                </Button>
            </Space>
        </Form.Item>
      </div> */}
    </div>
  )
}
export default SignDetail;